<!-- 打印预览 -->
<template>
  <el-dialog title="打印预览" v-model="dialogVisible" width="60%" :before-close="handleClose" append-to-body>
    <div style="margin-bottom: 10px">
      <el-button type="primary" v-print="'#printArea'">打印</el-button>
    </div>
    <div id="printArea" style="padding: 10px;margin-bottom: 10px">
      <el-descriptions :column="2" border>
        <el-descriptions-item v-for="(item, index) of printFrom" :key="index">
          <template #label>
            {{ item.name }}
          </template>
          {{ item.data }}
        </el-descriptions-item>
      </el-descriptions>
      <el-table :data="tableData" border style="width: 100%; margin-top: 10px">
        <el-table-column v-for="item of filteredTableProps" :key="item.props" :prop="item.prop" :label="item.title"
          :width="item.width">
          <template #default="scope">
            <span v-if="item.prop === 'stageStatus'">
              <span v-if="scope.row.stageStatus == 0">未上架</span>
              <span v-if="scope.row.stageStatus == 1" type="success">已上架</span>
              <span v-if="scope.row.stageStatus == 2" type="danger">已下架</span>
            </span>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'printPreview',
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    printFrom: {
      type: Array,
      default: () => [],
    },
    tableProps: {
      type: Array,
      default: () => [],
    },
  },
  components: {},
  data() {
    return {
      dialogVisible: false,
    }
  },
  computed: {
    filteredTableProps() {
      // 使用 map 方法遍历 tableProps 数组
      // 对每个对象删除 rfid 字段后返回剩余的属性
      return this.tableProps.filter((item) => item.prop !== 'rfid')
    },
  },
  watch: {},
  created() { },
  mounted() { },
  methods: {
    // 打开打印预览
    open() {
      this.dialogVisible = true
    },
    // 关闭打印预览
    handleClose() {
      this.dialogVisible = false
    },
  },
}
</script>
<style scoped lang="less">
#printArea table {
  table-layout: fixed !important;
}
</style>
